<template>
  <div class="el-mr-mathouseTable">
    <div class="el-mr-mh-firstbg">
      <el-table
        ref="receiveTable"
        size="mini"
        :data="resData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        highlight-current-row
        height="350"
      >
        <el-table-column type="selection" width="40"> </el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="50"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="palletCode"
          label="工作包器具编码"
          :show-overflow-tooltip="true"
          width="130"
        >
        </el-table-column>
        <el-table-column
          prop="packageCode"
          label="工作包编码"
          width="150"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="aoCode"
          label="AO任务编码"
          :show-overflow-tooltip="true"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="itemCode"
          label="物料编码"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="itemQty"
          label="数量"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="deliveryLocation"
          label="配送位置"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNumber"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { sysToolMaterialData } from "@/utils/api.js";

export default {
  name: "MathouseTable",
  data() {
    return {
      // 当前页数
      pageNumber: 1,
      // 数据总个数
      totalCount: 0,
      // 返回的数据数组
      resData: [],
      // 每页数据个数  row'，'col'，'tmpRow'
      pageSize: 100,
      palletCode:'',
      packageCode:'',
      aoCode:'',
      itemCode:'',
    };
  },
  methods: {
    // 勾选函数
    handleSelectionChange(val) {
      // 将勾选的数据信息给 TopBtn-修改按钮
      this.$bus.$emit('sysTmChange',val)
      // 将勾选的数据信息给 TopBtn-删除按钮
      // this.$bus.$emit('sysTkDelete',val)
    },
    // 选择每页条数后请求接口更新表格
    handleSizeChange(val) {
      this.pageSize = val;
      this.$options.methods.searchTableData.bind(this)()
    },
    // 分页函数
    handleCurrentChange(val) {
      this.pageNumber = val;
      this.$options.methods.searchTableData.bind(this)()
    },
    searchTableData(){
      sysToolMaterialData({
        searchParams:{
          palletCode:this.palletCode,
          packageCode:this.packageCode,
          aoCode:this.aoCode,
          itemCode:this.itemCode
        },
        pageParameter:{
          rows:this.pageSize,
          page:this.pageNumber
        }
      }).then((res)=>{
        console.log('工作包物料表格',res)
        if(res.data.retCode == 200){
          this.resData = res.data.responseBody.result;
          this.totalCount = res.data.responseBody.pageParameter.totalCount;
        }else {
            this.$Alert({
                title: "失败",
                message: res.data.message,
                type: "error",
            });
        }
      })
    }
  },
  mounted() {
    this.$options.methods.searchTableData.bind(this)()
    // 接收查询成功的数据
    this.$bus.$on('sysTmSxTable',(e)=>{
      this.resData = e.data.data.responseBody.result
      console.log(this.resData)
      this.totalCount = e.data.data.responseBody.pageParameter.totalCount
      this.palletCode = e.palletCode
      this.packageCode = e.packageCode
      this.aoCode = e.aoCode
      this.itemCode = e.itemCode
    })
    // 修改刷新Table并定位页数
    this.$bus.$on('sysTmRefreshTable',(e)=>{
      this.$options.methods.searchTableData.bind(this)()
    })
    
  },
};
</script>
<style scoped>
.el-mr-mh-firstbg {
  width: 100%;
  height: 100%;
  text-align: center;
}
.el-pagination {
  text-align: center;
}
.el-mr-mathouseTable {
  height: 350px;
  /* background-color: red; */
}
</style>